<template>
  <div class="footer-nav">
    <!-- 底部导航 -->
    <footer class="van-hairline--top-bottom van-tabbar van-tabbar--fixed foot-bar">
      <router-link v-for="item in tabList"
                   :key="'tab_' + item.id"
                   :to="{ name: item.path }"
                   class="van-tabbar-item solid-top">
        <div class="van-tabbar-item__icon">
          <img class="unselect"
               :src="item.icon" />
          <img class="select"
               :src="item.select_icon" />
        </div>
        <p class="van-tabbar-item__text">{{ item.text }}</p>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      showFooter: true,
      tabList: Object.freeze([
        {
          id: 1,
          text: '首页',
          icon: require('@/assets/image/footer-home.png'),
          select_icon: require('@/assets/image/footer-home-full.png'),
          path: 'HomeIndex'
        },
        {
          id: 2,
          text: '购物车',
          icon: require('@/assets/image/footer-cart.png'),
          select_icon: require('@/assets/image/footer-cart-full.png'),
          path: 'Cart'
        },
        {
          id: 3,
          text: '我要送礼',
          icon: require('@/assets/image/footer-upgrade.png'),
          select_icon: require('@/assets/image/footer-upgrade-full.png'),
          path: 'Upgrade'
        },
        {
          id: 4,
          text: '我的',
          icon: require('@/assets/image/footer-user.png'),
          select_icon: require('@/assets/image/footer-user-full.png'),
          path: 'MemberIndex'
        }
      ])
    }
  }
}
</script>

<style lang="scss">
.footer-nav {
  height: 50px;
  .van-tabbar-item__icon {
    img {
      width: 22px;
      height: 22px;
    }
  }
  .unselect {
    display: block;
  }
  .select {
    display: none;
  }
  .router-link-active {
    .van-tabbar-item__text {
      color: $mainColor;
    }
    .unselect {
      display: none;
    }
    .select {
      display: block;
    }
  }
}
</style>
